<div class="dashboard-container">
  <div class="dashboard-header">
    <h2 class="dashboard-title">库存实时监控</h2>
    <div class="dashboard-actions">
      <a class="btn btn-outline-secondary btn-sm me-2" [routerLink]="['/dashboard/alert-rules']">
        <i class="bi bi-gear-fill me-1"></i>预警规则设置
      </a>
      
      <span class="update-time" *ngIf="updateTime">
        最后更新: {{updateTime | date:'yyyy-MM-dd HH:mm:ss'}}
      </span>
      
      <!-- 自动刷新设置 -->
      <div class="auto-refresh-settings">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="autoRefreshSwitch" 
                 [(ngModel)]="autoRefreshEnabled" 
                 (change)="toggleAutoRefresh()">
          <label class="form-check-label" for="autoRefreshSwitch">
            自动刷新
          </label>
        </div>
        
        <select class="form-select form-select-sm" 
                [(ngModel)]="autoRefreshInterval"
                (change)="changeRefreshInterval()"
                [disabled]="!autoRefreshEnabled">
          <option *ngFor="let option of autoRefreshIntervalOptions" [value]="option.value">
            {{option.label}}
          </option>
        </select>
      </div>
      
      <button class="btn btn-primary refresh-btn" (click)="refreshData()" [disabled]="refreshing">
        <i class="bi bi-arrow-clockwise" [class.rotating]="refreshing"></i>
        {{refreshing ? '刷新中...' : '刷新数据'}}
      </button>
    </div>
  </div>

  <div class="dashboard-content" *ngIf="!loading; else loadingTemplate">
    <!-- 库存统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card total-stock">
        <div class="stat-icon">
          <i class="bi bi-boxes"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{stockStats.totalStock | number}}</div>
          <div class="stat-label">总库存量</div>
        </div>
      </div>
      
      <div class="stat-card total-amount">
        <div class="stat-icon">
          <i class="bi bi-currency-yen"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{stockStats.totalAmount | number:'1.2-2'}}</div>
          <div class="stat-label">库存总金额</div>
        </div>
      </div>
      
      <div class="stat-card warehouse-count">
        <div class="stat-icon">
          <i class="bi bi-building"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{stockStats.warehouseCount}}</div>
          <div class="stat-label">仓库数量</div>
        </div>
      </div>
      
      <div class="stat-card goods-type-count">
        <div class="stat-icon">
          <i class="bi bi-tags"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{stockStats.typeCount}}</div>
          <div class="stat-label">货品类型</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-container">
      <div class="chart-box warehouse-chart">
        <h4 class="text-center mb-3">仓库库存分布</h4>
        <div #warehouseChartContainer id="warehouseChart" class="chart"></div>
      </div>
      <div class="chart-box type-chart">
        <h4 class="text-center mb-3">货品类型分布</h4>
        <div #typeChartContainer id="typeChart" class="chart"></div>
      </div>
    </div>

    <!-- 低库存警告 -->
    <div class="low-stock-warning" *ngIf="lowStockItems.length > 0">
      <h3>
        <i class="bi bi-exclamation-triangle-fill"></i>
        低库存预警 ({{lowStockItems.length}})
      </h3>
      <div class="low-stock-items">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>货品编码</th>
              <th>货品名称</th>
              <th>规格</th>
              <th>当前库存</th>
              <th>仓库</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of lowStockItems.slice(0, 5)">
              <td>{{item.goodsCode}}</td>
              <td>{{item.goodsName}}</td>
              <td>{{item.specification}}</td>
              <td class="text-danger">{{item.currentStock}}</td>
              <td>{{item.warehouseName}}</td>
            </tr>
          </tbody>
        </table>
        <div class="more-link" *ngIf="lowStockItems.length > 5">
          <a [routerLink]="['/stock/kucun-zhu-xinxi']" [queryParams]="{IsZeroStock: true}">
            查看全部 <i class="bi bi-arrow-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 加载中模板 -->
  <ng-template #loadingTemplate>
    <div class="loading-container">
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
      </div>
    </div>
  </ng-template>
</div> 